<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Using the gallery shortcode &middot; RisunJan</title>
    <meta name="generator" content="Hugo 0.79.1" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="author" content="Risun Jan">
    
      <meta name="description" content="一起来玩丫">
    
    
    <link rel="canonical" href="../../../2017/05/20/Using-the-gallery-shortcode.html"/>
    <link rel="icon" href="favicon.ico">
    <link rel="apple-touch-icon" href="apple-touch-icon.png"/>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/monokai.css">
    <link rel="stylesheet" href="fancybox/jquery.fancybox.css">
    
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
    <meta property="og:title" content="Using the gallery shortcode" />
<meta property="og:description" content="This way you can easily include a gallery into your page. Copy the code below into your content file and enter the relative paths to your images." />
<meta property="og:type" content="article" />
<meta property="og:url" content="/2017/05/20/Using-the-gallery-shortcode.html" />
<meta property="article:published_time" content="2017-05-20T12:00:23+02:00" />
<meta property="article:modified_time" content="2017-05-20T12:00:23+02:00" />

    
    <meta itemprop="name" content="Using the gallery shortcode">
<meta itemprop="description" content="This way you can easily include a gallery into your page. Copy the code below into your content file and enter the relative paths to your images.">
<meta itemprop="datePublished" content="2017-05-20T12:00:23+02:00" />
<meta itemprop="dateModified" content="2017-05-20T12:00:23+02:00" />
<meta itemprop="wordCount" content="33">



<meta itemprop="keywords" content="" />

    <meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Using the gallery shortcode"/>
<meta name="twitter:description" content="This way you can easily include a gallery into your page. Copy the code below into your content file and enter the relative paths to your images."/>
<meta name="twitter:site" content="@RisunJan"/>

    

    

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="container">


<div id="container">
	<header id="header">
  <div id="header-main" class="header-inner">
    <div class="outer">
      <a href="" id="logo">
          
          <i class="logo" style="background-image: url('css/images/logo.png')"></i>
          
          <span class="site-title">RisunJan</span>
      </a>
      <nav id="main-nav">
          
          
          <a class="main-nav-link" href="../../../">首页</a>
          
          
          
          
          
          

          
          <a class="main-nav-link" href="../../../2015/10/02/How-to-add-pages-to-the-menu.html">How to add pages to the menu</a>
          

          
          
          
          
          <a class="main-nav-link" href="tags/">标签</a>
          
          
          
          <a class="main-nav-link" href="categories/">收藏</a>
          
          
      </nav>
        <nav id="sub-nav">
          <div class="profile" id="profile-nav">
            <a id="profile-anchor" href="javascript:;"><img class="avatar" src="css/images/avatar.png"><i class="fa fa-caret-down"></i></a>
          </div>
        </nav>
        <div id="search-form-wrap">
          <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form">
              <input type="search" name="q" class="search-form-input" placeholder="Search">
              <button type="submit" class="search-form-submit">
              </button>
              <input type="hidden" name="sitesearch" value="" />
         </form>
        </div>
    </div>
  </div>
  <div id="main-nav-mobile" class="header-sub header-inner">
    <table class="menu outer">
      <tbody>
          <tr>
          
          
          <td><a class="main-nav-link" href="../../../">首页</a></td>
          
          
          
          
          
          

          
          <td><a class="main-nav-link" href="../../../2015/10/02/How-to-add-pages-to-the-menu.html">How to add pages to the menu</a></td>
          

          
          
          
          
          <td><a class="main-nav-link" href="tags/">标签</a></td>
          
          
          
          <td><a class="main-nav-link" href="categories/">收藏</a></td>
          
          
          <td>
          <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form">
          <input type="search" name="q" class="search-form-input" placeholder="Search">
          <input type="hidden" name="sitesearch" value="" />
          </form>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</header>

   	
   	<div class="outer">
   	
    	<aside id="profile">
  <div class="inner profile-inner">
    <div class="base-info profile-block">
      
      <img id="avatar" src="https://www.gravatar.com/avatar/16c7ce393580171fd117df90b11b458e?s=100&d=identicon"/>
      
      <h2 id="name">Risun Jan</h2>
      <h3 id="title">静水流深</h3>
      <span id="location"><i class="fa fa-map-marker"></i>HeBi</span>
      
          <a id="follow" href="https://github.com/JanRisun">
              Follow
          </a>
      
    </div>
    <div class="article-info profile-block">
      <div class="article-info-block">
        5
        <span>Posts</span>
      </div>
      <div class="article-info-block">
        
          5
        
        <span>
            Tags
        </span>
      </div>
    </div>
    <div class="profile-block social-links">
      <table>
        <tr>
          
<td><a href="//github.com/RisunJan" target="_blank" title="GitHub"><i class="fa fa-github"></i></a></td>



















































<td><a href="//twitter.com/RisunJan" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a></td>


          <td><a href="../../../index.xml" target="_blank" title="RSS"><i class="fa fa-rss"></i></a></td>
        </tr>
      </table>
    </div>
  </div>
</aside>

    

    <section id="main">
    
    <article id="page-undefined" class="article article-type-page" itemscope="" itemprop="blogPost">
    <div class="article-inner">
        

        <header class="article-header">
    <a href="../../../2017/05/20/Using-the-gallery-shortcode.html">
    <h1 class="article-title" itemprop="name">
        Using the gallery shortcode
    </h1>
    </a>
    <div class="article-meta">

        
        <div class="article-date">
            <i class="fa fa-calendar"></i>
            <time datetime="2017-05-20 12:00:23 &#43;0200 &#43;0200" itemprop="datePublished">2017-05-20</time>
            &middot;
            33
            words
            &middot;
            1
            minute read
        </div>
        
        
            
            
        

        
            
            
        
    </div>
</header>

        <div class="article-entry" itemprop="articleBody">
            <p>This way you can easily include a gallery into your page. Copy the code below into your content file and enter the relative paths to your images.</p>
<p>{{&lt; gallery
&ldquo;/banners/placeholder.png&rdquo;
&ldquo;/banners/placeholder.png&rdquo;
&ldquo;/banners/placeholder.png&rdquo;
&gt;}}</p>
<!-- raw HTML omitted -->
<div class="article-gallery">
    <div class="article-gallery-photos">
        
        <a class="article-gallery-img fancybox" href="../../../banners/placeholder.png" rel="group1">
            <img src="../../../banners/placeholder.png" itemprop="image">
        </a>
        
        <a class="article-gallery-img fancybox" href="../../../banners/placeholder.png" rel="group1">
            <img src="../../../banners/placeholder.png" itemprop="image">
        </a>
        
        <a class="article-gallery-img fancybox" href="../../../banners/placeholder.png" rel="group1">
            <img src="../../../banners/placeholder.png" itemprop="image">
        </a>
        
    </div>
</div>
        </div>
        <footer class="article-footer">
    <a data-url="../../../2017/05/20/Using-the-gallery-shortcode.html" data-id="b5878041fdfd74bbf2f0b2b55108eb61" class="article-share-link">
        <i class="fa fa-share"></i>
        Share
    </a>
    
    <a href="../../../2017/05/20/Using-the-gallery-shortcode.html#disqus_thread" class="article-comment-link">
        Comments
    </a>
    

    <script>
    (function ($) {
        
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
    </script>
</footer>

    </div>

    
<nav id="article-nav">
    
    <a href="../../../2017/05/20/Formulas-with-MathJax.html" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">
          Older
      </strong>
      <div class="article-nav-title">Formulas with MathJax</div>
    </a>
    

    
    <a href="../../../2017/05/20/Markdown-Cheat-Sheet.html" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">
          Newer
      </strong>
      <div class="article-nav-title">Markdown Cheat Sheet</div>
    </a>
    
</nav>


</article>


<section id="comments">
    <div id="disqus_thread">
        <div id="disqus_thread"></div>
<script type="application/javascript">
    var disqus_config = function () {
    
    
    
    };
    (function() {
        if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
            document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
            return;
        }
        var d = document, s = d.createElement('script'); s.async = true;
        s.src = '//' + "RisunJan111" + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
    </div>
</section>


    </section>

   	
    	<aside id="sidebar">
    
<div class="widget-wrap">
    <h3 class="widget-title">
        Recents
    </h3>
    <div class="widget">
        <ul id="recent-post">
            
            <li>
                <div class="item-thumbnail">
                    <a href="../../../2020/12/30/First.html" class="thumbnail">
                    
                        <span class="thumbnail-image thumbnail-none"></span>
                    
                    </a>
                </div>
                <div class="item-inner">
                    
                    <p class="item-title"><a href="../../../2020/12/30/First.html" class="title">First</a></p>
                    <p class="item-date">
                        <time datetime="2020-12-30 15:30:44 &#43;0800 CST" itemprop="datePublished">2020-12-30</time>
                    </p>
                </div>
            </li>
            
            <li>
                <div class="item-thumbnail">
                    <a href="../../../2017/05/20/Markdown-Cheat-Sheet.html" class="thumbnail">
                    
                        <span class="thumbnail-image thumbnail-none"></span>
                    
                    </a>
                </div>
                <div class="item-inner">
                    
                    
                    
                    <p class="item-title"><a href="../../../2017/05/20/Markdown-Cheat-Sheet.html" class="title">Markdown Cheat Sheet</a></p>
                    <p class="item-date">
                        <time datetime="2017-05-20 12:10:51 &#43;0200 &#43;0200" itemprop="datePublished">2017-05-20</time>
                    </p>
                </div>
            </li>
            
            <li>
                <div class="item-thumbnail">
                    <a href="../../../2017/05/20/Using-the-gallery-shortcode.html" class="thumbnail">
                    
                        <span class="thumbnail-image thumbnail-none"></span>
                    
                    </a>
                </div>
                <div class="item-inner">
                    
                    
                    
                    <p class="item-title"><a href="../../../2017/05/20/Using-the-gallery-shortcode.html" class="title">Using the gallery shortcode</a></p>
                    <p class="item-date">
                        <time datetime="2017-05-20 12:00:23 &#43;0200 &#43;0200" itemprop="datePublished">2017-05-20</time>
                    </p>
                </div>
            </li>
            
            <li>
                <div class="item-thumbnail">
                    <a href="../../../2017/05/20/Formulas-with-MathJax.html" class="thumbnail">
                    
                        <span class="thumbnail-image thumbnail-none"></span>
                    
                    </a>
                </div>
                <div class="item-inner">
                    
                    
                    
                    <p class="item-title"><a href="../../../2017/05/20/Formulas-with-MathJax.html" class="title">Formulas with MathJax</a></p>
                    <p class="item-date">
                        <time datetime="2017-05-20 11:58:06 &#43;0200 &#43;0200" itemprop="datePublished">2017-05-20</time>
                    </p>
                </div>
            </li>
            
            <li>
                <div class="item-thumbnail">
                    <a href="../../../2015/10/02/How-to-add-pages-to-the-menu.html" class="thumbnail">
                    
                        <span style="background-image:url(banners/placeholder.png)" alt="Using the gallery shortcode" class="thumbnail-image"></span>
                    
                    </a>
                </div>
                <div class="item-inner">
                    
                    
                    <p class="item-category">
                        
                        <a class="article-category-link" href="categories/programming">
                        programming
                        </a>
                    </p>
                    
                    
                    <p class="item-title"><a href="../../../2015/10/02/How-to-add-pages-to-the-menu.html" class="title">How to add pages to the menu</a></p>
                    <p class="item-date">
                        <time datetime="2015-10-02 21:49:20 &#43;0200 &#43;0200" itemprop="datePublished">2015-10-02</time>
                    </p>
                </div>
            </li>
            
        </ul>
    </div>
</div>


    


<div class="widget-wrap">
    <h3 class="widget-title">Categories</h3>
    <div class="widget">
        <ul class="category-list">
            
            <li class="category-list-item">
                
                <a class="category-list-link" href="categories/programming">
                    programming
                </a>
                <span class="category-list-count">1</span>
            </li>
            
        </ul>
    </div>
</div>




    


<div class="widget-wrap">
    <h3 class="widget-title">
        Tags
    </h3>
    <div class="widget">
        <ul class="category-list">
            
            <li class="category-list-item">
                
                <a class="category-list-link" href="tags/golang">
                    golang
                </a>
                <span class="category-list-count">1</span>
            </li>
            
            <li class="category-list-item">
                
                <a class="category-list-link" href="tags/hugo">
                    hugo
                </a>
                <span class="category-list-count">1</span>
            </li>
            
            <li class="category-list-item">
                
                <a class="category-list-link" href="tags/markdown">
                    markdown
                </a>
                <span class="category-list-count">1</span>
            </li>
            
            <li class="category-list-item">
                
                <a class="category-list-link" href="tags/programming">
                    programming
                </a>
                <span class="category-list-count">1</span>
            </li>
            
            <li class="category-list-item">
                
                <a class="category-list-link" href="tags/theme">
                    theme
                </a>
                <span class="category-list-count">1</span>
            </li>
            
        </ul>
    </div>
</div>




    


<div class="widget-wrap">
    <h3 class="widget-title">
        Tag cloud
    </h3>
    <div class="widget tagcloud">
        
        
        <a href="tags/golang" style="font-size: 12px;">golang</a>
        
        
        <a href="tags/hugo" style="font-size: 12px;">hugo</a>
        
        
        <a href="tags/markdown" style="font-size: 12px;">markdown</a>
        
        
        <a href="tags/programming" style="font-size: 12px;">programming</a>
        
        
        <a href="tags/theme" style="font-size: 12px;">theme</a>
        
    </div>
</div>





    <div id="toTop" class="fa fa-angle-up"></div>
</aside>

    
	</div>
</div>

<footer id="footer">
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020
      Powered by <a href="//gohugo.io">Hugo</a>. Theme by <a href="http://github.com/ppoffice">PPOffice</a>.
    </div>
  </div>
</footer>


<script src="fancybox/jquery.fancybox.pack.js"></script>
<script src="js/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>


<script>hljs.initHighlightingOnLoad();</script>


<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']]}
  });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>




</body>
</html>